<template>
  <div id="divv">
    <van-nav-bar title="立即注册" left-arrow @click-left="onClickLeft" style="color:#1989fa" />
    <div class="one-a">
      <van-cell-group>
        <van-field required v-model="form.username" label="姓名" placeholder="请输入你的名字" />
        <van-field
          required
          v-model="form.phone"
          @blur="changePhone"
          :error-message="errmsg"
          clearable
          label="手机"
          placeholder="请输入手机号码"
          maxlength="11"
        />
        <van-field
          required
          v-model="form.password"
          :right-icon="type?'closed-eye':'eye-o'"
          @click-right-icon="chex"
          :type="type?'password':'text'"
          label="密码"
          placeholder="请输入密码"
        />
        <van-field
          v-model="Confirmpassword"
          @blur="chanPsw"
          :error-message="eomsg"
          :right-icon="types?'closed-eye':'eye-o'"
          @click-right-icon="chexs"
          :type="types?'password':'text'"
          label="确认密码"
          placeholder="请再输入一次密码"
        />
      </van-cell-group>
      <van-radio-group class="dxan" v-model="form.sex" style="display:flex">
        <span>性别</span>
        <van-radio class="sg" name="男" checked-color="#1989fa">帅哥</van-radio>
        <van-radio name="女" checked-color="#1989fa">美女</van-radio>
      </van-radio-group>
      <van-cell-group>
        <van-field v-model="form.nativePlace" clearable label="籍贯" placeholder="家庭住址" />
      </van-cell-group>
      <van-field
        readonly
        clickable
        label="班级"
        :value="form.className"
        placeholder="选择班级"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        label="学历"
        :value="form.education"
        placeholder="选择学历"
        @click="xueShow = true"
      />
      <van-popup v-model="xueShow" position="bottom">
        <van-picker
          show-toolbar
          :columns="educationArr"
          @cancel="xueShow = false"
          @confirm="onXue"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        label="年龄"
        :value="form.age"
        placeholder="选择年龄"
        @click="ageShow = true"
      />
      <van-popup v-model="ageShow" position="bottom">
        <van-picker show-toolbar :columns="ageArr" @cancel="ageShow = false" @confirm="onAge" />
      </van-popup>

      <div style="text-align: center; background:#fff;padding-bottom:20px;">
        <button class="one-b" @click="onSubmit">立即创建</button>
        <router-link to="/login">
          <button class="one-c">已经有账号了</button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { Notify } from "vant";
import { signIo, classList } from "@/API/user.js";
import axios from "axios";
export default {
  created() {
    this.forAge();
    classList().then(res => {
      res.list.forEach(item => {
        var obj = {};
        obj.text = item.name;
        obj.value = item.classId;
        this.columns.push(obj);
      });
      console.log(this.columns);
    });
  },
  data() {
    return {
      type: true,
      types: true,
      errmsg: "",
      eomsg: "",
      value1: "5d5e33782b0ede088b83463c",
      showPicker: false,
      option1: [],
      columns: [],
      ageArr: [],
      educationArr: ["高中", "大专", "一本", "二本"],
      ageShow: false,
      xueShow: false,
      Confirmpassword: "",
      form: {
        username: "",
        phone: "",
        className: "",
        nativePlace: "",
        password: "",
        sex: "",
        age: "",
        education: "",
        classId:""
      }
    };
  },
  methods: {
    chex() {
      this.type = !this.type;
    },
    chexs() {
      this.types = !this.types;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      var flag = true;
      for (let key in this.form) {
        if (!this.form[key]) {
          flag = false;
        }
      }
      if (!this.eomsg) {
        if (flag) {
          Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            loadingType: "spinner",
            message: "加载中..."
          });
          console.log(this.form)
          signIo(this.form)
            .then(res => {
              console.log(res)
              Toast.clear();
              Notify({
                message: "注册成功",
                duration: 1000,
                background: "#99CCFF"
              });
              this.$router.push("/login");
              
            })
            .catch(err => {
              Toast.clear();
              Dialog.alert({
                message: "网络错误"
              });
            });
        } else {
          Toast.fail({
            duration: 1000,
            message: "请填写完全部"
          });
        }
      } else {
        Dialog.alert({
          message: "两次输入密码请一致"
        });
      }
    },
    onConfirm(v) {
      this.form.className = v.text;
      this.form.classId=v.value
      this.showPicker = false;
    },
    onAge(value) {
      this.form.age = value;
      this.ageShow = false;
    },
    onXue(value) {
      this.form.education = value;
      this.xueShow = false;
    },
    forAge() {
      for (let i = 18; i <= 30; i++) {
        this.ageArr.push(i);
      }
    },
    changePhone() {
      var reg = /^1[3-9][0-9]{9}$/;
      if (reg.test(this.form.phone)) {
        this.errmsg = "";
      } else {
        this.errmsg = "手机格式错误";
      }
    },
    chanPsw() {
      if (this.Confirmpassword === this.form.password) {
        this.eomsg = "";
      } else {
        this.eomsg = "密码与上面不一致";
      }
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style  scoped>
#selectAge {
  border: none;
  outline: none;
  width: 100px;
}
#selectAge option {
  border: none;
}
.select {
  border: none;
}
.optio {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #fff;
  padding-left: 16px;
}
.optio span {
  margin-right: 60px;
  font-size: 15px;
  color: #323233;
}
.van-nav-bar {
  background: none;
  margin-bottom: 20px;
}
.van-nav-bar .van-icon {
  color: #1989fa;
}
.van-nav-bar__text {
  color: #1989fa;
}
.van-nav-bar__title {
  font-size: 18px;
  color: #3b4ca5;
}
.dxan {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding-left: 16px;
  color: #323233;
  font-size: 14px;
  background: #ffff;
}
.dxan span {
  margin-right: 60px;
}
.sg {
  margin-right: 80px;
}
.cj {
  font-size: 25px;
  font-style: unset;
  color: slategray;
}
#divv {
  width: 100%;
  height: 100vh;
  background: url(../../img/login-img/mohu.jpg) no-repeat center/cover;
  padding: 0 10px 0;
  /* background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565779805437&di=1afc2f57a6a94cbafdd5fad74eb2b5cc&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff1ac015c7f0de763ee4d5e6603e173cb051c08077e751-b7SFlS_fw658)
    no-repeat;
  background-size: contain; */
}
.inpus {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.name {
  width: 90%;

  height: 40px;
  padding-left: 10px;
  border: none;
  margin: 0 auto;
  border-radius: 10px;
}
.one-b {
  width: 95%;
  height: 40px;
  background: #1989fa;
  border: 1px solid #1989fa;
  color: azure;
  margin-top: 20px;
  border-radius: 6px;
}
.one-c {
  width: 95%;
  height: 40px;
  border: 1px solid #1989fa;
  color: #1989fa;
  margin-top: 10px;
  border-radius: 6px;
}
</style>